<template>
  <div class="tab-box">
    <ul class="tab-list"
      :class="{oval: type === 'oval'}">
      <li class="tab-item"
        v-for="(info, i) in tabList"
        :class="{active: currentType === info.type}"
        :key="i"
        @click="changeTab(info.type)">{{info.label}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    tabList: {
      type: Array,
      default () {
        return []
      }
    },
    activeType: {
      type: String
    },
    isInit: { // 是否需要初始化
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      currentType: ''
    }
  },
  methods: {
    // 初始化选中
    init () {
      if (this.activeType) {
        this.currentType = this.activeType
        this.isInit && this.changeTab(this.currentType)
      } else if (this.tabList.length > 0) {
        this.currentType = this.tabList[0].type
        this.isInit && this.changeTab(this.currentType)
      }
    },
    // 改变状态
    changeTab (type) {
      this.currentType = type
      this.$emit('change', type)
    },
    // 主动取消高亮, 由外部组件调起
    clearCurrentType () {
      this.currentType = ''
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="stylus" scoped>
.tab-box
  display inline-block
  .tab-list
    height 32px
    display flex
    align-items center
    background: #FDFEFF;
    border-radius: 6px;
    border: 1px solid #EAEAEA;
    box-sizing border-box
    &.oval
      border-radius 20px
      border-color #4C84FF
      .tab-item
        color #4C84FF
        border none
        &.active
          line-height 32px
          border none
          background #4C84FF
          color #fff
        &:first-of-type.active
          border-radius 16px 0 0 16px
        &:last-of-type.active
          border-radius 0 16px 16px 0
    .tab-item
      height 32px
      line-height 32px
      text-align center
      font-size 12px
      color: #53555E;
      cursor: pointer;
      user-select none
      width 80px
      border-right 1px solid #EAEAEA
      box-sizing border-box
      &:last-of-type
        border-right 0
      &.active
        line-height 30px
        background: #F1F6FB;
        border: 1px solid #7CABFF;
        color #4C84FF
      &:first-of-type.active
        border-radius 6px 0 0 6px
      &:last-of-type.active
        border-radius 0 6px 6px 0
</style>
